<template>
  <div>
    <div class="node" v-has="{action: 'rate:group:map:list', effect: 'move'}">
      <!-- <div class="search_box topSelect">
        <div class="selectBox">
          <label>站点：</label>
          <el-select
            style="width:160px"
            v-model="searchs.siteId"
            clearable
            @change="getRate"
            placeholder="请选择"
          >
            <el-option  v-for="item of brandList"
              :key="item.id"
              :value="item.id"
              :label="item.name"></el-option>
          </el-select>
        </div>
        <div class="selectBox">
          <label>集团大客户：</label>
          <el-select
            style="width:160px"
            v-model="searchs.thirdId"
            clearable
            @change="getRate"
            placeholder="请选择"
          >
            <el-option  v-for="item of Company"
              :key="item.id"
              :value="item.id"
              :label="item.name"></el-option>
          </el-select>
        </div>
        <div class="selectBox">
          <label>费率组：</label>
          <el-select
            style="width:160px"
            v-model="searchs.rateGroupId"
            clearable
            @change="getRate"
            placeholder="请选择"
          >
            <el-option  v-for="item of RateList"
              :key="item.id"
              :value="item.id"
              :label="item.name"></el-option>
          </el-select>
        </div>
        <div class="searchBox1" style="margin-left: 20px">
          <el-button type="primary" icon="el-icon-search" @click="getRate">查询</el-button>        
        </div>
      </div> -->
      <Panel :title="'费率映射('+name+')'" useBack>
        <div slot='ext' class="examine">
          <el-button v-has="{action: 'rate:group:map:add', effect: 'move'}" class="button-offt" type="success" icon="el-icon-plus" @click="()=>editStore()">新增</el-button>
      </div>
      <TableEncapsulation
        slot="body"
        :tableConfig="tableConfig"
        :tableData="tableData"
      >
      <template slot="operation" slot-scope="operation">
            <el-button size="mini" icon="el-icon-edit"
              v-has="{action: 'rate:group:map:update', effect: 'move'}"
              @click="()=>editStore(operation.row)"
            >编辑</el-button>
            <el-button size="mini" type="danger" icon="el-icon-delete"
              v-has="{action: 'rate:group:map:delete', effect: 'move'}"
              @click="()=>remove(operation.row.id)"
            >删除</el-button>
          </template>
          <TablePager
            slot="pager"
            v-if="pager.use"
            :size="pager.size"
            :pageChange="pageChange"
            :show-total="pager.showTotal"
            :total="pager.total"
            :current="pager.current"
          >
            <span class="demonstration">GO></span>
          </TablePager>
      </TableEncapsulation>
      </Panel>

      <!-- 绑定费率 -->
      <ModalPanel 
      :visible='visible'
      title="费率配置"
      :onCancel="onCancel"
      :onOk="onSubmit">
      <div>
        <ModifyForm
            :hiddenBtn='true'
            :editColumn='editColumn'
            :updateData="updateData"
            labelWidth='100px'
            ref="configModal"
            class="ModifyForm"
            :temporaryData='modalData'>
          </ModifyForm>
      <!-- <TableEncapsulation
      slot="body"
      :tableConfig="tableConfig1"
      :tableData="tableData1"
          >
          <template slot="operation" slot-scope="operation">
              <el-button
                  type="text"
                  @click="()=>bindId(operation.row.id)"
                >选择</el-button>
              </template>
              <TablePager
                slot="pager"
                v-if="pager1.use"
                :size="pager1.size"
                :pageChange="pageChange1"
                :show-total="pager1.showTotal"
                :total="pager1.total"
                :current="pager1.current"
              >
                <span class="demonstration">GO></span>
              </TablePager>
    </TableEncapsulation> -->
      </div>
    </ModalPanel>
    <!-- 绑定费率 -->
    </div>
    <div style="display: none;width:100%;height:100%;margin: auto;" v-has="{action: 'rate:group:map:list', effect: 'noPremiss'}">
      <NoPremission></NoPremission>
    </div>
  </div>
</template>
<script>
import request from "@/tools/request";
import Panel from "@/components/Panel";
import TableEncapsulation from "@/components/TableEncapsulation";
import TablePager from "@/components/Pager";
import SearchInput from "@/components/SearchInput";
import { objectFilter } from "@/tools/array";
import ModalPanel from "@/components/ModalPanel";
import ModifyForm from "@/components/ModifyForm";
export default {
  name: "companyRateList",
  components: {
    TableEncapsulation,
    TablePager,
    Panel,
    SearchInput,
    ModalPanel,
    ModifyForm
  },
  data() {
    return {
      searchs:{
        component: 'companyRate',
        thirdId:'',
        siteId:"",
        rateGroupId:'',
      },
      id:'',name:'',
      tableData: [],
      Company: '',
      RateList: '',
      query: {
        page: 1
      },
       pager: {
        component: 'companyRate',
        use: true,
        total: 0,
        current: 1,
        size: 10,
        showTotal: true
      },
      operation: true,
      brandList:[{id:'',name:'请选择'}],
      // 配置费率
      visible: false,
      modalData:{},
      tableData1: [],
      editColumn: [
        {
          name: "站点",
          prop: "siteId",
          type: "select",
          optionBindLabel: 'name',
          optionBindValue: 'id',
          optionList: [{'id':'','name':'请选择站点'}],
          onChange: () => {},
          required:true,
          width:24
        },
        {
          name: "费率组",
          prop: "rateGroupId",
          type: "select",
          optionBindLabel: 'name',
          optionBindValue: 'id',
          optionList: [{'id':'','name':'请选择费率组'}],
          onChange: () => {},
          required:true,
          width:24
        },
      ],
    };
  },
  created() {
    if(this.$route.query.id){
      this.id = this.$route.query.id
    }
    if(this.$route.query.name){
      this.name = this.$route.query.name
    }
    // this.searchsFnc()
    this.getRate()
  },
  mounted(){
    this.iotSite()
    // this.company()
    this.rate()
    // this.getQuery
  },
  computed: {
    tableConfig () {
      return {
        selection: true,
        columnConfig: [
          {
            label: "编号",
            type: "text",
            prop: "id",
            align: "center"
          },
          {
            label: "集团大客户",
            type: "text",
            prop: "groupCompany",
            align: "center"
          },
          {
            label: "站点",
            type: "text",
            prop: "siteName",
            align: "center"
          },
          {
            label: "费率组",
            type: "text",
            prop: "rateGroupName",
            align: "center"
          },
          this.operation && {
            type: "operation",
            align: "center",
            label: "操作",
            width:180
          }
        ].filter(Boolean)
        }
    },
    tableConfig1 () {
      return {
        selection: true,
        columnConfig: [
          {
            label: "id",
            type: "text",
            prop: "id",
            align: "center"
          },
          {
            label: "费率名称",
            type: "text",
            prop: "name",
            align: "center"
          },
          this.operation && {
            type: "operation",
            align: "center",
            label: "操作",
            width:180
          }
        ].filter(Boolean)
        }
    }
  },
  methods: {
    async getRate() {
        let groupId = this.id
        // let rateGroupId = this.searchs.rateGroupId
        // let siteId = this.searchs.siteId
        let page = this.pager.current
        let search = objectFilter({groupId, page})
        const res = await request({
            url: "/rate/group/map/list",
            method: "POST",
            data: search
        });
        this.tableData = res.page.list
        this.pager.total = res.page.totalCount
        this.pager.current = res.page.currPage
      
    },
    pageChange(val) {
      this.pager.current = val;
      this.getRate();
    },
    changeSearch(key, val) {
      this[key] = val;
      this.pager.current = 1;
    },
  
    //获取站点
    async iotSite(){
      let { list } = await request({
      url: "/iot/site/select",
      method: "POST",
      data: {}
      });
      this.editColumn[0].optionList = list
    },
    // async company(){
    //   let { list } = await request({
    //   url: "/company/group/select",
    //   method: "POST",
    //   data: {}
    //   });
    //   this.Company  = list
    // },
    async rate(){
      let { list } = await request({
      url: "/grate/group/select",
      method: "POST",
      data: {}
      });
      this.editColumn[1].optionList = list
    },
    // 配置费率end
    //添加编辑start
    editStore(rowData){
      if(rowData){
        this.modalData = {...rowData}
      }else{
        this.modalData ={}
      }
      this.visible = true
    },
    async onSubmit(){
      this.$refs['configModal'].onSubmit()
    },
    onCancel(){
      this.visible = false
    },
    async updateData(values){
      let url, msg
      let groupId = this.id
     const { siteId, rateGroupId, id } = values
     if(id){
        url = '/rate/group/map/update'
        msg = '编辑成功'
     }else{
        url = '/rate/group/map/add'
        msg = '添加成功'
     }
     
      let res = await request({
        url: url,
        method: "POST",
        data: { siteId, rateGroupId, id, groupId }
      });
      if(res.code !==0) return
        this.$message.success(msg)
        this.visible = false
        this.getRate();
    },
    //添加编辑end
    remove(id){
       this.$confirm('确认删除吗', '操作确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then( async () => {
        let del = await request({
        url: "/rate/group/map/delete",
        method: "POST",
        dataType4:'json',
        data: [id]
      });
      if(del.code !==0) return
        this.$message.success('删除成功')
        if(this.tableData.length===1 && this.pager.current>1)
          this.$set(this.pager,'current', this.pager.current-1)
        this.getRate()
      })
    },
  }
}
</script>
<style lang='scss' >
.examine{
    display: flex;
    align-items: center;
    :global{
        div{
            color: #fff;
            padding: 10px;
            margin: 0 10px;
            border-radius: 2px;
            font-size: 14px;
            cursor: pointer;
            min-width: 60px;
            text-align: center;
        }
        .adopt{
                background: #409EFF;
        }
    }
}
.search_box {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  :global {
    .el-input {
      width: 150px;
    }
    .el-select {
      .el-input {
        width: 90px;
      }
    }
    .el-input__icon {
      line-height: 27px;
    }
    .el-range-separator{
      line-height: 26px;
    }
  }
}

.topSelect {
  background-color: white;
  border-radius: 4px;
  padding: 20px;
  margin-bottom: 20px;
}
.site-box{
    padding: 4px 6px;
    background: #dfdfdf;
    border-radius: 2px;
    margin: 7px;
    cursor: pointer;
}
.color {
    background: #2b87e7;
    color: #ffffff;
}
.site-block{
  display: flex;
  flex-wrap: wrap;
}
</style>